<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="getlist"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="编号" width="70">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="名字" width="150" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.author }}</span>
        </template>
      </el-table-column>
      <el-table-column label="图片" width="200" align="center">
        <template>
          <span>这里是图片</span>
        </template>
      </el-table-column>
      <el-table-column label="简介" width="400">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        label="品质"
        width="110"
        align="center"
      >
        <template slot-scope="scope">
          <span :class="scope.row.status | statusFilter">{{
            scope.row.status
          }}</span>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        prop="created_at"
        label="添加修改时间"
        width="200"
      >
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.display_time }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="编辑" width="300" class="bianji">
        <template slot-scope="scope">
          <el-button
            type="primary"
            plain
            @click="btn(scope, 1)"
          >详情</el-button>
          <el-button
            type="warning"
            plain
            @click="btn(scope, 2)"
          >编辑</el-button>
          <el-button type="danger" plain @click="btn(scope, 3)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="10"
    />
    <Dialog>
      <FromDetail v-show="btnNum===1" />
      <removeFrom v-show="btnNum===3" />
    </Dialog>
  </div>
</template>

<script>
import FromDetail from '@/components/from/fromdetail.vue' // 引入详情页表格
import removeFrom from '@/components/from/removeFrom.vue' // 引入删除页表格

export default {
  name: 'TabalList',
  components: {
    FromDetail,
    removeFrom
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        // 'published': 'success',
        // draft: 'gray',
        // deleted: 'danger',
        较差: 'black',
        一般: 'whtie',
        良好: 'green',
        优秀: 'blue',
        史诗: 'yellow',
        传说: 'zise',
        不朽: 'origin',
        神器: 'red'
      }
      return statusMap[status]
    }
  },

  props: {
    listLoading: {
      type: Boolean,
      default: true || false
    }
  },
  data() {
    return {
      isShow: true,
      btnNum: 0
    }
  },
  computed: {
    getlist() {
      return this.$store.state.equipment.list
    }
  },
  methods: {
    btn(o, j) {
      // 将点击行数的详情传入vuex
      this.$store.commit('SET_ROW_LIST', o.row)
      // 将按钮类型传入vuex
      this.btnNum = j
      this.$store.commit('SET_BTN_NUM', j)
      // 弹框显示还是隐藏
      this.$store.commit('SET_IS_SHOW', this.isShow)
      console.log(this.$store.state.equipment.rowlist)
    }
  }
}
</script>

<style>
.black {
  color: black;
}
.whtie {
  color: #ccc;
}
.green {
  color: chartreuse;
}
.blue {
  color: blue;
}
.yellow {
  color: rgb(255, 145, 0);
}
.zise {
  color: blueviolet;
}
.origin {
  color: orangered;
}
.red {
  color: red;
}
</style>
